<script setup>
import { defineProps, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['update:visible'])
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  logData: {
    type: Object,
    default: () => ({
      id: '',
      userId: '',
      action: '',
      targetType: '',
      targetId: '',
      ip: '',
      createdTime: '',
      detail: ''
    })
  }
})

const handleClose = () => {
  emit('update:visible', false)
}

// 需要显示的字段列表（排除pageNum和pageSize）
const displayFields = [
  'id',
  'userId',
  'action',
  'targetType',
  'targetId',
  'ip',
  'createdTime',
  'detail'
]

const LABEL_MAP = {
  id: '日志ID',
  userId: '用户ID',
  action: '操作类型',
  targetType: '目标类型',
  targetId: '目标ID',
  ip: 'IP地址',
  createdTime: '操作时间',
  detail: '详细信息'
}
</script>

<template>
  <el-dialog
      :model-value="visible"
      title="日志详情"
      width="700px"
      @close="handleClose"
  >
    <el-descriptions :column="1" border>
      <el-descriptions-item
          v-for="field in displayFields"
          :key="field"
          :label="LABEL_MAP[field] || field"
      >
        <template v-if="field === 'detail'">
          <pre class="detail-content">{{ logData[field] || '无' }}</pre>
        </template>
        <template v-else>
          {{ logData[field] || '无' }}
        </template>
      </el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.detail-content {
  background-color: #f5f7fa;
  padding: 10px;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}
</style>